<template>
	<div>
		<el-container>
			<head-top></head-top>
			<el-header>
				<el-form :inline="true" :model="formInline" @submit.native.prevent class="form-inline form-menu-list">
					<el-form-item label="艾美订单号">
						<el-input v-model="formInline.out_trade_no" placeholder="艾美订单号W2019xxxxxxx" @keyup.enter.native="onSearch" style="width: 400px;"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSearch">查询</el-button>
					</el-form-item>
				</el-form>
			</el-header>
			<el-main>
				<el-dialog title="退款明细" :visible="dialogFormVisible" @close="close"  width="700px">
					<el-form :model="dialogform" :disabled="true" :inline="true" :label-position="labelPosition">
						<div>
							<el-form-item label="艾美订单号" :label-width="labelwidth">
								{{dialogform.out_trade_no}}
							</el-form-item>
						</div>
						<el-form-item label="订单金额" :label-width="labelwidth">
							{{dialogform.total_fee}}
						</el-form-item>
						<el-form-item label="交易单号" :label-width="labelwidth">

							{{dialogform.transaction_id}}
						</el-form-item>

						<el-form-item label="应结订单金额" :label-width="labelwidth">
							{{dialogform.settlement_total_fee}}
						</el-form-item>
						<el-form-item label="用户支付方式" :label-width="labelwidth">
							<el-input v-model="dialogform.settlement_total_fee" autocomplete="off"></el-input>
						</el-form-item>
						<div style="margin-top: 40px;">
							<el-form-item label="一次退款明细" :label-width="labelwidth">
							</el-form-item>
						</div>
						<el-form-item label="退款单号" :label-width="labelwidth">
							{{dialogform.refund_id_0}}
						</el-form-item>

						<el-form-item label="艾美退款单号" :label-width="labelwidth">
							{{dialogform.out_refund_no_0}}
						</el-form-item>
						<el-form-item label="商户退款单号" :label-width="labelwidth">
							{{dialogform.out_refund_no_0}}
						</el-form-item>
						<el-form-item label="申请退款金额" :label-width="labelwidth">
							{{dialogform.refund_fee_0}}
						</el-form-item>
						<el-form-item label="退款金额" :label-width="labelwidth">
							{{dialogform.settlement_refund_fee_0}}
						</el-form-item>

						<el-form-item label="退款状态" :label-width="labelwidth">
							{{dialogform.refund_status_0|refund_status}}
						</el-form-item>
						<el-form-item label="退款成功日期" :label-width="labelwidth">
							{{dialogform.refund_success_time_0}}
						</el-form-item>
						<div v-show="dialogform.out_refund_no_1 != null">
							<div style="margin-top: 40px;">
								<el-form-item label="二次退款明细" :label-width="labelwidth">
								</el-form-item>
							</div>
							<el-form-item label="退款单号" :label-width="labelwidth">
								{{dialogform.refund_id_1}}
							</el-form-item>

							<el-form-item label="艾美退款单号" :label-width="labelwidth">
								{{dialogform.out_refund_no_1}}
							</el-form-item>
							<el-form-item label="商户退款单号" :label-width="labelwidth">
								{{dialogform.out_refund_no_1}}
							</el-form-item>
							<el-form-item label="申请退款金额" :label-width="labelwidth">
								{{dialogform.refund_fee_1}}
							</el-form-item>
							<el-form-item label="退款金额" :label-width="labelwidth">
								{{dialogform.settlement_refund_fee_1}}
							</el-form-item>

							<el-form-item label="退款状态" :label-width="labelwidth">
								{{dialogform.refund_status_1|refund_status}}
							</el-form-item>
							<el-form-item label="退款成功日期" :label-width="labelwidth">
								{{dialogform.refund_success_time_1}}
							</el-form-item>
						</div>
					</el-form>
				</el-dialog>


			</el-main>

		</el-container>
	</div>
</template>

<script>
	import headTop from '@/components/headTop'
	import {
		Message,
		MessageBox
	} from 'element-ui'
	import {
		list
	} from '@/api/refund'
	export default {
		data() {
			return {
				dialogform: {
					// 					transaction_id: '',
					out_trade_no: '',
					// 					total_fee: '',
					// 					out_refund_no_0: '',
					refund_id_1: '',
					// 					refund_fee_1: '',
					// 					settlement_refund_fee_0: '',
					// 					refund_status_0: '',
					// 					refund_success_time_0: ''
				},
				formInline: {
					out_trade_no: '',
				},
				dialogFormVisible: false,
				labelwidth: '20',
				labelPosition: 'top',
			}
		},
		methods: {
			onSearch() {
				if (this.formInline.out_trade_no == "") {
					Message({
						message: "请输入订单号",
						type: 'error',
						duration: 5 * 1000
					})
				} else {
					list(this.formInline.out_trade_no)
						.then((response) => {
							if (response.return_code == "FAIL") {
								Message({
									message: response.return_msg,
									type: 'error',
									duration: 5 * 1000
								})
							} else {
								if (response.result_code == "FAIL") {
									if (response.err_code == "REFUNDNOTEXIST") {
										Message({
											message: "订单没有发生退款,目前只能查询微信的渠道，请确认订单渠道",
											type: 'error',
											duration: 5 * 1000
										})
									}
								} else {
									this.dialogform = response;
									this.dialogFormVisible = true;
								}
							}

						})
				}
			},
			close() {
				this.dialogFormVisible = false;
				this.dialogform = {}
			}
		},
		components: {
			headTop,
		},
		filters: {
			refund_status: function(value) {
				if (!value) return ''
				value = value.toString()
				const options = {
					"SUCCESS": "退款成功",
					"REFUNDCLOSE": "退款关闭",
					"PROCESSING": "退款处理中",
					"CHANGE": "退款异常,用户的卡作废或者冻结"
				}
				return options[value]
			}
		}
	}
</script>

<style>

</style>
